<template>
    <el-card class="aside-card">
        <template #header>
            <div class="card-header">
                <span>悬赏榜</span>
                <el-icon><Medal /></el-icon>
            </div>
        </template>
        <ul v-infinite-scroll="load" class="infinite-list" style="overflow: auto">
            <li
                v-for="(item ,index) in dataList"
                :key="index"
                class="infinite-list-item"
            >
                <el-link
                :underline="false"
                :href="`/article?articleId=${item.articleId}`"
                target="_blank"
                >
                    {{item.title}}
                </el-link>
            </li>
        </ul>
    </el-card>
</template>

<script setup>
    import {ref} from "vue";
    import {getWithToken} from "@/net/postAndGetMethodWithToken";

    const count = ref('0')
    const title = ref('')
    const dataList = ref([{}])
    const load = () => {
        count.value += 2
    }

    getWithToken(`api/reward/all`, (data, code, message) => {
        dataList.value = data
    })
</script>

<style scoped>
.card-header {
    display: flex;
    justify-content: center;
    align-items: center;
}
.aside-card{
    opacity: 0.7;
    height: 500px;
    width: 350px;
    border-radius: 10px;
}
.infinite-list {
    height: 300px;
    padding: 0;
    margin: 0;
    list-style: none;
}
.infinite-list .infinite-list-item {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    background: var(--el-color-primary-light-9);
    margin: 10px;
    color: var(--el-color-primary);
}
.infinite-list .infinite-list-item + .list-item {
    margin-top: 10px;
}
</style>